<template>
    <div class="middel-box">
        <titleComponent title="商机调度"></titleComponent>
        <div class="center">
            <tabChange @clickTime="clickType" :duringTIme="2000" :openCycle="false"
                :btnTitle="['商机储备率', '商机转换率', '商机前置率', '商机漏捕率', '商机复盘率', '零中标区县占比', '轻量级项目拓展', '中标双份额金额', '中标双份额个数']"
                :isRadioButton="true" class="group-tab"></tabChange>
            <div class="top-list">
                <div class="top-item" v-for="item, i in topList" :key="i">
                    <div class="num"
                        :style="{ backgroundColor: i == 0 ? '#ff3e33' : i == 1 ? '#ffa944' : i == 2 ? '#0ae7be' : '#0b82ff' }">
                        {{ i + 1 }}</div>
                    <div class="name">
                        {{ item.name }}
                    </div>
                    <div class="progress-box">
                        <progressBar :progress="item.value"
                            :backgroundColor="i == 0 ? '#0ae7be' : i < 7 ? '#0b82ff' : '#ffa944'" class="progress"
                            :radius="true" :bg="'#d4dffe'" />
                    </div>
                    <img :src="require(i == 0 ? '@/assets/img/icon2.png' : i == 1 ? '@/assets/img/icon3.png' : i < 7 ? '@/assets/img/icon4.png' : '@/assets/img/icon5.png')"
                        width="37" height="37" class="icon2" />
                    <div class="progress-text">
                        {{ item.value }}%
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import tabChange from '@/components/tabChange';
import titleComponent from "./titleComponent";
import progressBar from "@/components/progressBar";
import { color } from 'echarts';
export default {
    components: {
        titleComponent,
        tabChange,
        progressBar
    },
    data() {
        return {
            changeType: 1,
            topList: [
                { name: '哈尔滨', value: 92.5 },
                { name: '齐齐哈尔', value: 90.1 },
                { name: '牡丹江', value: 88.3 },
                { name: '佳木斯', value: 82.7 },
                { name: '大庆', value: 75.4 },
                { name: '伊春', value: 72.3 },
                { name: '鸡西', value: 69.5 },
                { name: '绥化', value: 66.3 },
                { name: '七台河', value: 62.4 },
                { name: '黑河', value: 50.1 }
            ]
        }
    },
    methods: {
        clickType(type) {
            this.changeType = type
            console.log(this.changeType)
        },
    }
}
</script>
<style lang="less" scoped>
.middel-box {
    width: 935px;
    height: 600px;
    background: #fff;
    box-sizing: border-box;
    padding: 16px;
}

.center {
    width: 100%;
}

.top-list {
    margin-top: 16px;

    .top-item {
        display: flex;
        height: 42px;
        line-height: 42px;

        .name {
            width: 80px;
        }

        .progress-box {
            width: 650px;

            .progress {
                height: 10px;
                width: 625px;
                margin-top: 14px;
            }
        }

        div {
            margin: 0 8px;
        }

        img {
            margin: 8px 10px;
        }

        .num {
            color: #fff;
            background: #0b82ff;
            border-radius: 100px;
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            margin: 10px;
            font-size: 14px;
        }

        .icon2 {
            margin: 8px 5px;
        }

        .progress-text {
            width: 60px;
        }
    }
}
</style>